import React from 'react'
import ReactDOM from 'react-dom'

class MenuSettingPreviewPopoverItem extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    var index = this.props.index;
    return (
      <li className="list-group-item">
        <button type="button" className="btn btn-default"
                onClick={(event)=> this.props.onMenuClick(index)}>
          {this.props.name}
        </button>
      </li>
    )
  }
}

class MenuSettingPreviewPopover extends React.Component {
  constructor(props) {
    super(props)
  }

  onMenuClick(subIndex) {
    this.props.onMenuClick(this.props.activeButtonIndex, subIndex, true)
  }

  /**
   * render sub button list.
   * if sub button count < 5, add '+' button
   * return react components
   */
  renderList() {
    var content = [];
    var activeButtonIndex = this.props.activeButtonIndex;
    var subButtons = [],
        subButtonCount = 0;
    if (activeButtonIndex != null && activeButtonIndex < this.props.buttons.length) {
      var button = this.props.buttons[activeButtonIndex];
      subButtons = button.sub_button;
      subButtonCount = subButtons.length;

      if (subButtonCount < 5) {
        content.push(React.createElement(MenuSettingPreviewPopoverItem, {
          index: subButtonCount,
          name: "+",
          onMenuClick: this.onMenuClick.bind(this)
        }))
      }

      for (var i = 0; i < subButtonCount; i++) {
        var subButton = subButtons[i];
        content.push(React.createElement(MenuSettingPreviewPopoverItem, {
          index: i,
          name: subButton.name,
          onMenuClick: this.onMenuClick.bind(this)
        }))
      }
    }
    return content;
  }

  render() {

    return (
      <div className="popover fade top in" id={this.props.id} role="tooltip" ref={this.props.id}>
        <div className="arrow"></div>
        <div className="popover-content">
          <ul className="list-group">
            {this.renderList()}
          </ul>
        </div>
      </div>
    )
  }
}

class MenuSettingPreview extends React.Component {

  constructor(props) {
    super(props);

    this.popovers = [
      'preview-popover0',
      'preview-popover1',
      'preview-popover2'
    ]
  }

  onMenuClick(index) {
    var refName = "menu-button"+index;
    var buttons = this.props.buttons;
    if (buttons) {
      this.popovers.forEach(function(el, i) {
        if (i == index && index < buttons.length) {
          $("#"+el).show();
        }else {
          $("#"+el).hide();
        }
      })

      this.props.onMenuClick(index, null)
    }
  }

  renderChild() {
    var self = this;
    var content = [];
    for (var i = 0; i < 3; i++) {
      var id = "preview-popover"+i;
      content.push( React.createElement(MenuSettingPreviewPopover, {
        id: id,
        activeButtonIndex: self.props.activeButtonIndex,
        buttons: self.props.buttons,
        onMenuClick: self.props.onMenuClick
      }))
    }
    return content
  }

  render() {
    var buttons = this.props.buttons,
        buttonsCount = buttons?buttons.length:0;
    return (
      <div className="menu-setting-preview" >
        <div className="preview-header">
          
        </div>
        <div className="preview-bottom">
          <div className="btn-group" role="group">
            <button type="button"
                    ref = "menu-button0"
                    className="btn btn-default"
                    onClick={(event)=>this.onMenuClick(0)}>{buttonsCount>0?buttons[0].name:"+"}</button>
            <button type="button"
                    ref = "menu-button1"
                    className="btn btn-default"
                    onClick={(event)=>this.onMenuClick(1)}>{buttonsCount>1?buttons[1].name:"+"}</button>
            <button type="button"
                    ref = "menu-button2"
                    className="btn btn-default"
                    onClick={(event)=>this.onMenuClick(2)}>{buttonsCount>2?buttons[2].name:"+"}</button>
            {this.renderChild()}
          </div>
        </div>
      </div>
    )
  }
}

export default MenuSettingPreview
